<template>
  <div class="app-container org-tab-info">
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body >
      <div>
        <el-tabs v-model="activeName" style="margin-top: -15px;">
          <el-tab-pane label="流程表单" name="first" style="margin-top:2px">
            <el-form ref="form" :model="form"  label-width="100px">
            <el-row style="width:600px; margin-left:8px" >
              <el-col :span="24">
              <el-form-item label="流程创建" class="item" >
                <span class="flowStyle">{{form.flowCreation}}</span>
              </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="24">
              <el-form-item label="流程名称" class="item" >
                <span>{{form.flowName}}</span>
              </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="12">
              <el-form-item label="学院" class="item" >
                <span>{{collegeFormat(form.collegeOrgId)}}</span>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="实验室" class="item">
                  <span>{{classRoomIdFormat(form.classRoomId)}}</span>
              </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="12">
              <el-form-item label="预约仪器" class="item" >
                  <span>{{instrumentDeviceIdFormat(form.instrumentDeviceId)}}</span>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="预约工位数" class="item" >
                  <span>{{form.reserveSeats}}</span>
              </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <!-- <el-col :span="12">
                <el-form-item label="周次">
                  {{form.weekStart+'-'+form.weekEnd}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="星期" class="item" >
                  <span>{{weekDayOpt1 +'  '+ form.sectionStart+'-'+form.sectionEnd + ' 节次'}}</span>
                </el-form-item>
              </el-col> -->
              <el-col :span="24">
                <el-form-item label="预定时间">
                  {{form.sksj}}
                </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="24">
              <el-form-item label="实验项目" class="item" >
                  <span>{{form.experimentalProject}}</span>
              </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="24">
              <el-form-item label="项目附件" class="item">
                <el-upload
                      action="' '"
                        :limit="10"
                        show-file-list
                        :auto-upload="false"
                        :file-list="fileList"
                        :on-preview="handlePictureCardPreview"
                        multiple
                        class="uploadCss"
                    >
                      <span ></span>
                </el-upload>
              </el-form-item>
              </el-col>
              </el-row>

          <hr>
          <div class="form_title" >
              <p >预约人员</p>
            </div>
          <div class="form_table">

            <template >
              <el-table :data="form.appointmentList"  size="mini">
               <el-table-column prop="applicantNo" label="工(学)号" ></el-table-column>
                <el-table-column prop="applicantName" label="姓名" align="center"></el-table-column>
                <el-table-column prop="applicantPhone" label="手机号" align="center"></el-table-column>
                <el-table-column prop="applicantOrgName" label="学院" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="applicantClassNo" label="班级" align="center"></el-table-column>
                <el-table-column prop="applicantSafetyCredits" label="安全学分" align="center"></el-table-column>
                <el-table-column prop="applicantLastUse" label="最近学习时间" align="center"></el-table-column>
              </el-table>
            </template>
        </div>

        <div class="form_title">
              <p>参与人员</p>
            </div>
          <div class="form_table">

            <template >
              <el-table :data="form.participationList"  size="mini">
               <el-table-column prop="applicantNo" label="工(学)号" ></el-table-column>
                <el-table-column prop="applicantName" label="姓名" align="center"></el-table-column>
                <el-table-column prop="applicantPhone" label="手机号" align="center"></el-table-column>
                <el-table-column prop="applicantOrgName" label="学院" align="center" min-width="100">
                </el-table-column>
                <el-table-column prop="applicantClassNo" label="班级" align="center"></el-table-column>
                <el-table-column prop="applicantSafetyCredits" label="安全学分" align="center"></el-table-column>
                <el-table-column prop="applicantLastUse" label="最近学习时间" align="center"></el-table-column>
              </el-table>
            </template>
        </div>

            </el-form>
           </el-tab-pane>
          <el-tab-pane label="流程签批" name="third" style="margin-top:2px">
            <TaskApproval ref="task" :instanceId="form.instanceId"></TaskApproval>
          </el-tab-pane>
        </el-tabs>
    </div>
    <div class="bottom_button">
      <el-button type="primary" @click="cancel">关闭</el-button>
    </div>
    </el-dialog>
  </div>
</template>

<script>
import {listReservation, getReservation} from "@/api/labdata/reservation";
import Treeselect from "@riophae/vue-treeselect";
import TaskApproval from '@/views/labdata/flowTask/task_approval.vue'
import {getOrgByFunctionOpt,listSecondOrgLab} from "@/api/labdata/orgnization";
import { listOrgThird, getOrgThird, delOrgThird, addOrgThird, updateOrgThird, exportOrgThird } from "@/api/labdata/orgThird";
import {listInstrumentation,getInstrumentation,delInstrumentation,addInstrumentation,updateInstrumentation,exportInstrumentation} from "@/api/labbase/instrumentation";


export default {
   name: "ReservationDetail",
    props:{
  },
  components: {
      TaskApproval,Treeselect
    },
  data() {
    return {
       //二级机构
      secondOrgList: [],
      //二级机构下的实验室
      secondOrgLabList: [],
      // 实验室仪器列表
      instrumentationList: [],
       // 项目类型字典
      labProjectOptOptions: [],
      weekDayOptOptions: [],
      title:'',
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      open: false,
      flowName:"",
      activeName: 'first',
      //文件列表
      fileList: [],
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {},
      host:process.env.VUE_APP_PROXY,
      detailData:{},
    };
  },
  created() {
      this.getDicts("labProjectOpt").then(response => {
        this.labProjectOptOptions = response.data;
        getOrgByFunctionOpt(2).then(response => {
        this.secondOrgList = response.data;
      });
      // 星期
      this.getDicts("weekDayOpt").then(response => {
          this.weekDayOptOptions = response.data;
      });
    });
  },
  computed:{
    weekDayOpt1 () {
        const obj = this.weekDayOptOptions.find(item => item.dictValue == this.form.weekDayOpt)
        if (obj) {
          return obj.dictLabel
        }
        return ''
    },
  },
  methods: {
      handleUpdate(row){
        const instanceId = row.instanceId || this.ids;
        getReservation(instanceId).then(response => {
        this.form = response.data;
        this.fileList = [];
        this.$emit("flowName",response.data.flowName);
        if(this.form.images){
                this.form.images.forEach(item =>{
                  this.fileList.push({
                    id: item.fileId,
                    name:item.fileName,
                    url:this.host+'/labdata/labFile/image?fileId='+item.fileId,
                  })
                });
              }
          this.open = true;
          this.title = "实验室预约申请预览";
      });
      this.handleLabChange(row.collegeOrgId)
      this.refreshChoose(row.classRoomId)
      this.$forceUpdate();
      },
       // 项目类型字典翻译
    labProjectOptFormat(value) {
      return this.selectDictLabel(this.labProjectOptOptions, value);
    },
      //附件展示
    handlePictureCardPreview(file) {
      window.location.href = file.url;
      this.dialogVisible = true;
    },

    // 取消按钮
      cancel() {
        this.open = false;
        this.activeName = 'first';
        this.form = {};
      },

    handleLabChange(item) {
      //console.log('change lab :'+item);
      if (item) {
        this.form.labId = null;
        listSecondOrgLab(item).then(response => {
          this.secondOrgLabList = response.data;
        });
      }
    },

    refreshChoose(item) {
       if (item) {
       let params = {
        labId: item
      };
      listInstrumentation(params).then(response => {
        this.instrumentationList = response.rows;
      });
      }
    },
    refresh(){
      //刷新列表数据
      this.$emit("refresh");
    },

    //学院匹配
    collegeFormat(value) {
       let datas = this.secondOrgList
        for(let key in datas){
            if(datas[key].orgId == value){
                return datas[key].orgName;
            }
        }
        return "";
     },

    // 实验室匹配
     classRoomIdFormat(value) {
       let  datas = this.secondOrgLabList
        for(let key in datas){
            if(datas[key].orgId== value){
                return datas[key].orgName;
            }
        }
        return "";
     },

      // 实验室仪器匹配
     instrumentDeviceIdFormat(value) {
       let  datas = this.instrumentationList
        for(let key in datas){
            if(datas[key].assetNo == value){
                return datas[key].name;
            }
        }
        return "";
     },


  },
};
</script>

<style type="text/css" scoped>
  .bottom_button{
    width: 100%;
    text-align: right;
    margin-top: 10px;
  }
  .uploadCss .el-upload{
    display: none !important;
  }
   .form-item {
    margin-bottom: 2px;
  }
   .form_table {
    margin-bottom: 5px;
  }
  .item {
    margin-bottom: 2px;
  }
</style>
